<template>
	<view class="success">
		<u-navbar leftIconSize="0" placeholder title="合成藏品"></u-navbar>
		<view class="img">
			<image :src="special_info.thumb" mode=""></image>
		</view>
		<view class="title">
			{{special_info.title}}
		</view>
		<view class="status">
			合成成功
		</view>
		<view class="tips">
			合成成功，您可在“我的-藏品”页面中
			查看合成藏品
		</view>
		<view @click="backMine" class="back">
			返回
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: {},
				detail: {},
				special_info: {}
			}
		},
		onLoad(e) {
			// this.options = e
			this.cominfo(e.id)
		},
		methods: {
			backMine () {
				uni.switchTab({
					url: '/pages/Mine/index'
				})
			},
			//合成详情
			async cominfo(id) {
				let res = await this.$http({
					url: this.$api.cominfo,
					method: 'GET',
					hideLoading: true,
					needToken: true,
					data: {
						id: id
					}
				})
				if (res.code == 200) {
					this.detail = res.data
					// this.ruleList.rule = res.data.rule
					this.special_info = res.data.special_info
				} else {
					uni.$u.toast(res.msg)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.success {
	padding: 0 85rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	.img {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 580rpx;
		height: 580rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 2rpx solid;
		border-image: linear-gradient(180deg, rgba(199, 242, 255, 1), rgba(218, 225, 255, 1)) 2 2;
		margin: 90rpx 0 60rpx;
		image {
			width: 520rpx;
			height: 520rpx;
		}
	}
	.title {
		font-size: 36rpx;
		font-weight: 600;
		color: #16172F;
	}
	.status {
		width: 120rpx;
		height: 36rpx;
		background: #468EFF;
		border-radius: 4rpx 20rpx 4rpx 20rpx;
		color: #FFFFFF;
		font-size: 22rpx;
		text-align: center;
		line-height: 36rpx;
		margin: 18rpx 0 33rpx;
	}
	.tips {
		width: 402rpx;
		font-size: 24rpx;
		color: #8C93AA;
		text-align: center;
	}
	.back {
		width: 360rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		border: 1rpx solid #979797;
		margin-top: 219rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #16172F;
	}
}
</style>
